<template>
  <view class="direct-car-container">
	<wd-picker :columns="startColumns" v-model="localData.start" use-default-slot>
	  <view class="form-city-container address pr40">
		<text class="form-go mr10" v-if="!localData.start">上车地</text>
		<text class="form-city-name area mr10">{{localData.start}}</text>
		<wd-icon name="fill-arrow-down " size="22px"></wd-icon>
	  </view>
	</wd-picker>
  
    <wd-icon name="translate-bold" size="16px" color="#1b9c61" @click="swap"></wd-icon>
  
    <wd-picker :columns="endColumns" v-model="localData.end" use-default-slot>
		<view class="to-city-container address pl40">
			<text class="form-go mr10" v-if="!localData.end">目的地</text>
			<text class="to-city-container area mr10">{{localData.end}}</text> 
			<wd-icon name="fill-arrow-down" size="22px" ></wd-icon>
		</view>
	  </wd-picker>
  </view>
  <!--   日期     -->
  <wd-calendar v-model="value" @confirm="handleConfirm">
		<view class="calendar-container">
			<view class="date-detail-container">
				<view class="week" v-if="!localData.time">时间</view>
				<view class="date">{{localData.time}}</view> 
			</view>
			<wd-icon name="calendar" size="22px" color="#1b9c61"></wd-icon>
		</view>
	</wd-calendar>
  <!--   搜索     -->
  <view class="search-container" @click="handleSearch">
    搜索
  </view>
  <view class="safe-content "></view>
</template>

<script setup lang="ts">
  import {ref,reactive,watch} from "vue";
  import {onLoad} from "@dcloudio/uni-app";
  import {traffic,getStartAndEnd} from "@/trafficSubPack/api/trafficHome";
	
	const emit = defineEmits(['serach','swapdata']);
	const props = defineProps({
		data: {
			type: Object,
			required: true,
			default: () => ({
			  start: '',
			  end: '',
			  time: '',
			  type: ''
			}),
		}
	}); 
	
    const value = ref(Date.now()) 
    const queryData = reactive({
	  param: {
		type: 1,
	  },
    })
	const localData = reactive({
	  start: props.data.start,
	  end: props.data.end,
	  time: props.data.time,
	  type: props.data.type
	});
	watch(() => props.data, (newVal) => { 
	  localData.start = newVal.start;
	  localData.end = newVal.end;
	  localData.time = newVal.time;
	  localData.type = newVal.type;
	  queryData.param.type = newVal.type;
	  getMudidi()
	  // 创建 Date 对象
	  const date = new Date(localData.time);
	  
	  // 获取 Unix 时间戳（毫秒）
	  value.value = date.getTime();
	  // console.log('localData',localData); 
	}, { deep: true });
 
	
	const startColumns = ref([])
	const endColumns = ref([]) 
	
	const getMudidi = () =>{
		// 出发地目的地查询
		getStartAndEnd(queryData.param.type).then(res=>{
			startColumns.value = res.result.departurePlace
			endColumns.value = res.result.destination
		})
	}
	
	function handleConfirm({ value }) { 
		// 将时间戳转换为 Date 对象
		let date = new Date(value); 
		// 提取年、月、日，并格式化为 YYYY-MM-DD
		let year = date.getFullYear(); // 获取年份
		let month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份并补零
		let day = String(date.getDate()).padStart(2, '0'); // 获取日期并补零
	    localData.time = `${year}-${month}-${day}`;
	}
	
    const handleSearch =() => {
		emit('serach',localData);
	};
	
	const swap = () => {
	    emit('swapdata');
	};
</script>

<style lang="scss" scoped>
  .direct-car-container {
    display: flex;
    align-items: center;
    width: auto;
    padding: 40rpx 0;
    margin: 0 30rpx;
    border-bottom: 1rpx solid #EEEEEE;
    .address {
	   min-width: 260rpx;
      .area {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
      }
    }
  }
  .calendar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding: 40rpx 0;
    margin: 0 30rpx;
    border-bottom: 1rpx solid #EEEEEE;
    .date-detail-container {
      display: flex;
      align-items: flex-end;
      .date {
        font-size: 41.5rpx;
        font-weight: bold;
        color: #333333;
      }
      .week {
        font-size: 29rpx;
        margin-left: 4rpx;
        color: #333333;
      }
    }
  }
  .search-container {
    width: auto;
    padding: 20rpx 0;
    margin: 40rpx 30rpx 0 30rpx;
    color: #FDFFEB;
    letter-spacing: 8rpx;
    font-size: 33rpx;
    text-align: center;
    border-radius: 10.5rpx;
    background: #1B9C61;
  }
  .safe-content {
    height: 40rpx;
  }
</style>
